<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { fetchMyArticles, fetchMyFavorites, fetchMyLikes, fetchMyFollowings, fetchMyFollowers, fetchFeed, fetchDrafts, fetchNotifications, fetchCommentManagement } from '@/apis/blog';

const loading = ref(false);
const activeTab = ref('my-blogs');
const stats = ref({ articleCount: 0, likeCount: 0, favoriteCount: 0, followerCount: 0 });

const myBlogs = ref([]);
const myFavorites = ref([]);
const myLikes = ref([]);
const myFollowings = ref([]);
const myFollowers = ref([]);
const feedList = ref([]);
const drafts = ref([]);
const notifications = ref([]);
const commentMgmt = ref([]);

async function loadCenter() {
  loading.value = true;
  try {
    const [b, f, l, fo, fr, fe, d, n, cm] = await Promise.all([
      fetchMyArticles(),
      fetchMyFavorites(),
      fetchMyLikes(),
      fetchMyFollowings(),
      fetchMyFollowers(),
      fetchFeed(),
      fetchDrafts(),
      fetchNotifications(),
      fetchCommentManagement(),
    ]);
    myBlogs.value = b.data.items; stats.value.articleCount = b.data.total;
    myFavorites.value = f.data.items; stats.value.favoriteCount = f.data.total;
    myLikes.value = l.data.items; stats.value.likeCount = l.data.total;
    myFollowings.value = fo.data.items;
    myFollowers.value = fr.data.items; stats.value.followerCount = fr.data.total;
    feedList.value = fe.data.items;
    drafts.value = d.data.items;
    notifications.value = n.data.items;
    commentMgmt.value = cm.data.items;
  } catch (e) {
    ElMessage.error('加载个人中心失败');
  } finally {
    loading.value = false;
  }
}

onMounted(loadCenter);
</script>

<template>
  <div class="blog-center blog-theme">
    <el-card shadow="never" class="info-card">
      <el-row :gutter="12">
        <el-col :xs="12" :md="6"><el-statistic label="文章数量" :value="stats.articleCount" /></el-col>
        <el-col :xs="12" :md="6"><el-statistic label="获赞数量" :value="stats.likeCount" /></el-col>
        <el-col :xs="12" :md="6"><el-statistic label="收藏数量" :value="stats.favoriteCount" /></el-col>
        <el-col :xs="12" :md="6"><el-statistic label="粉丝数量" :value="stats.followerCount" /></el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="center-card">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="我的博客" name="my-blogs">
          <el-empty v-if="myBlogs.length === 0" description="暂无博客"> </el-empty>
          <el-table v-else :data="myBlogs" border>
            <el-table-column prop="title" label="标题" min-width="220" />
            <el-table-column prop="status" label="状态" width="100" />
            <el-table-column prop="readCount" label="阅读" width="100" />
            <el-table-column prop="likeCount" label="点赞" width="100" />
            <el-table-column prop="commentCount" label="评论" width="100" />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button link type="primary" @click="$router.push(`/c-oj/home/blog/${scope.row.id}`)">查看</el-button>
                <el-button link @click="$router.push('/c-oj/home/blog/editor')">编辑</el-button>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="我的收藏" name="my-favorites">
          <el-table :data="myFavorites" border>
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="author" label="作者" />
            <el-table-column prop="favoriteTime" label="收藏时间" />
            <el-table-column label="操作" width="140">
              <template #default>
                <el-button link type="danger">取消收藏</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="我的点赞" name="my-likes">
          <el-table :data="myLikes" border>
            <el-table-column prop="type" label="类型" width="100" />
            <el-table-column prop="title" label="标题/评论摘要" />
            <el-table-column prop="time" label="时间" width="160" />
            <el-table-column label="操作" width="140">
              <template #default>
                <el-button link type="danger">取消点赞</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="我的关注" name="my-followings">
          <el-table :data="myFollowings" border>
            <el-table-column prop="name" label="用户名" />
            <el-table-column prop="intro" label="简介" />
            <el-table-column label="操作" width="140">
              <template #default>
                <el-button link type="danger">取消关注</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="我的粉丝" name="my-followers">
          <el-table :data="myFollowers" border>
            <el-table-column prop="name" label="用户名" />
            <el-table-column prop="intro" label="简介" />
            <el-table-column label="操作" width="140">
              <template #default>
                <el-button link type="primary">关注</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="关注动态" name="feed">
          <el-timeline>
            <el-timeline-item v-for="f in feedList" :key="f.id" :timestamp="f.time">
              {{ f.user }} 发布了 {{ f.title }}
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>

        <el-tab-pane label="草稿箱" name="drafts">
          <el-table :data="drafts" border>
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="updateTime" label="更新时间" />
            <el-table-column label="操作" width="160">
              <template #default>
                <el-button link type="primary" @click="$router.push('/c-oj/home/blog/editor')">继续编辑</el-button>
                <el-button link type="danger">删除草稿</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="消息通知" name="notifications">
          <el-table :data="notifications" border>
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="time" label="时间" width="160" />
            <el-table-column label="操作" width="160">
              <template #default>
                <el-button link type="primary">标记已读</el-button>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="评论管理" name="comment-mgmt">
          <el-table :data="commentMgmt" border>
            <el-table-column prop="articleTitle" label="所属文章" />
            <el-table-column prop="user" label="评论用户" width="140" />
            <el-table-column prop="content" label="评论内容" />
            <el-table-column prop="time" label="时间" width="160" />
            <el-table-column prop="likeCount" label="点赞" width="100" />
            <el-table-column label="操作" width="200">
              <template #default>
                <el-button link type="primary">置顶</el-button>
                <el-button link type="danger">删除</el-button>
                <el-button link>回复</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.blog-center { max-width: 1200px; margin: 0 auto; }
.info-card { margin-bottom: 12px; }
.center-card { }
</style>